<template>
  <div class="body">
    <div class="body_main">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <a @click.stop="goBackCalalogue">
            <el-button
              icon="el-icon-arrow-left"
              size="mini"
              circle
              style="margin-right: 12px"
            ></el-button>
            数据目录管理
          </a>
        </el-breadcrumb-item>
        <el-breadcrumb-item
          style="height: 28px; line-height: 28px"
        >
          {{ secondTitle }}
        </el-breadcrumb-item>
        <!-- <el-breadcrumb-item
          style='height: 28px; line-height: 28px'
        >{{ configName }}
        </el-breadcrumb-item> -->
      </el-breadcrumb>
      <div class="line"></div>
      <div class="serve-info">
        <div style="width: 500px">
          <el-form
            :model="serveInfoForm"
            :rules="serveInfoRules"
            label-width="110px"
            label-position="left"
            ref="ruleFormServe"
          >
            <div class="type-title">
              <div class="type-title-pre"></div>
              <span>服务集信息</span>
            </div>
            <div class="content-part">
              <el-form-item
                label="目录节点"
                prop="catalogName"
              >
                <el-input
                  disabled
                  v-model="serveInfoForm.catalogName"
                />
              </el-form-item>
              <el-form-item
                label="数据名称"
                prop="sourceName"
              >
                <el-input
                  v-model="serveInfoForm.sourceName"
                />
              </el-form-item>
              <el-form-item
                label="服务类型"
                prop="serviceType"
              >
                <el-select
                  placeholder="请选择"
                  v-model="serveInfoForm.serviceType"
                  style="width: 100%"
                  @change="onServiceTypeChange"
                >
                  <el-option
                    v-for="(item, index) in serveTypeList"
                    :key="index"
                    :label="item.value"
                    :value="item.key"
                  ></el-option>
                </el-select>
              </el-form-item>
            </div>
          </el-form>
        </div>
        <div class="config-part">
          <div class="type-title">
            <div class="type-title-pre"></div>
            <span>统计图表配置</span>
          </div>
          <div class="content-part">
            <el-form
              :model="serveInfoForm"
              :rules="serveInfoRules"
              label-width="110px"
              label-position="left"
              ref="ruleFormServe"
            >
              <el-form-item
                label="统计图表"
                prop="showChart"
                v-if="serveInfoForm.serviceType !== '27'"
              >
                <el-radio-group
                  v-model="serveInfoForm.showChart"
                  @change="showChartChange"
                >
                  <el-radio :label="1">显示</el-radio>
                  <el-radio :label="0">不显示</el-radio>
                </el-radio-group>
              </el-form-item>
              <div v-else>
                <div
                  style="
                    text-align: center;
                    margin-top: 80px;
                  "
                >
                  <Icon
                    name="gantanhao"
                    color="#FFFFFF"
                    font-size="50"
                  />
                  BIM服务暂无图表配置！
                </div>
              </div>
              <div style="display: flex">
                <el-form-item
                  label="统计指标"
                  prop="aggFields"
                  v-if="
                    serveInfoForm.showChart &&
                    serveInfoForm.serviceType !== '27'
                  "
                >
                  <el-select
                    v-model="serveInfoForm.aggFields"
                    multiple
                    style="width: 320px !important"
                    clearable
                  >
                    <el-option
                      v-for="item in optionAll.fields"
                      :key="item.field"
                      :label="item.caption"
                      :value="item.field"
                    />
                  </el-select>
                </el-form-item>
                <el-form-item
                  label="分类字段"
                  style="margin-left: 20px"
                  prop="groupFields"
                  v-if="
                    serveInfoForm.showChart &&
                    serveInfoForm.serviceType !== '27'
                  "
                >
                  <el-select
                    v-model="serveInfoForm.groupFields"
                    multiple
                    style="width: 320px !important"
                    clearable
                  >
                    <el-option
                      v-for="item in optionAll.fieldsList"
                      :key="item.field"
                      :label="item.caption"
                      :value="item.field"
                    />
                  </el-select>
                </el-form-item>
              </div>
              <div style="display: flex">
                <el-form-item
                  label="统计方式"
                  prop="types"
                  v-if="
                    serveInfoForm.showChart &&
                    serveInfoForm.serviceType !== '27'
                  "
                >
                  <el-select
                    v-model="serveInfoForm.types"
                    multiple
                    style="width: 320px !important"
                  >
                    <el-option
                      v-for="item in optionAll.four"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
                <el-form-item
                  style="margin-left: 20px"
                  label="统计范围"
                  prop="range"
                  v-if="
                    serveInfoForm.showChart &&
                    serveInfoForm.serviceType !== '27'
                  "
                >
                  <el-checkbox-group
                    v-model="serveInfoForm.range"
                  >
                    <el-checkbox label="区域"></el-checkbox>
                    <el-checkbox
                      label="自定义"
                    ></el-checkbox>
                  </el-checkbox-group>
                </el-form-item>
              </div>
            </el-form>
          </div>
        </div>
      </div>

      <!-- <div class="line"></div> -->
      <div class="type-title">
        <div class="type-title-pre"></div>
        <span>地图服务信息</span>
      </div>
      <el-tabs
        v-model="editableTabsValue"
        :before-leave="getPreTab"
        editable
        @edit="handleTabsEdit"
        @tab-click="handleTabClick"
      >
        <el-tab-pane
          :key="item.name"
          v-for="item in editableTabs"
          :label="item.title"
          :name="item.name"
        >
        </el-tab-pane>
      </el-tabs>
      <el-form
        :model="serveForm"
        :rules="serveRules"
        v-if="editableTabs.length"
        label-width="110px"
        label-position="left"
        ref="ruleFormServe"
      >
        <!-- <div v-show="activeTool === 'serve'"> -->
        <!-- <div class="type-title">
          <div class="type-title-pre"></div>
          <span>服务集信息</span>
        </div>
        <div class="serve-info">
          <el-form-item label="目录节点" prop="catalogName">
            <el-input
              disabled
              v-model="serveForm.catalogName"
            />
          </el-form-item> -->
        <!-- <el-form-item label="数据名称" prop="sourceName">
            <el-input v-model="serveForm.sourceName" />
          </el-form-item>
          <el-form-item label="服务类型" prop="serviceType">
            <el-select
              placeholder="请选择"
              v-model="serveInfoForm.serviceType"
              style="width: 100%"
              @change="onServiceTypeChange"
            >
              <el-option
                v-for="(item, index) in serveTypeList"
                :key="index"
                :label="item.value"
                :value="item.key"
              ></el-option>
            </el-select>
          </el-form-item> -->

        <!-- </div> -->
        <!-- :style="{
            marginBottom: dataServiceList.length
              ? '0px'
              : '25px'
          }" -->
        <div class="serve-center">
          <div style="width: 500px">
            <div class="content-part">
              <el-form-item
                label="服务名称"
                prop="serviceName"
              >
                <el-input v-model="serveForm.serviceName" />
              </el-form-item>
              <el-form-item
                label="服务地址"
                prop="serviceUrl"
              >
                <el-input v-model="serveForm.serviceUrl" />
              </el-form-item>
              <el-form-item
                label="图例地址"
                prop="signService"
              >
                <el-input v-model="serveForm.signService" />
              </el-form-item>
              <!--              <el-form-item-->
              <!--                label="数据编码字段"-->
              <!--                prop="codeField"-->
              <!--              >-->
              <!--                <el-input-->
              <!--                  v-model="serveForm.codeField"-->
              <!--                  disabled-->
              <!--                />-->
              <!--              </el-form-item>-->

              <div
                class="dialog-line"
                v-if="serveInfoForm.serviceType !== '27'"
              ></div>
              <!--              <el-form-item-->
              <!--                label="专题类型"-->
              <!--                prop="specialType"-->
              <!--                v-if="serveInfoForm.serviceType !== '27'"-->
              <!--              >-->
              <!--                <el-select-->
              <!--                  placeholder="请选择"-->
              <!--                  v-model="serveForm.specialType"-->
              <!--                  style="width: 100%"-->
              <!--                  @change="specialTypeChange"-->
              <!--                >-->
              <!--                  <el-option-->
              <!--                    v-for="item in specialTypeList"-->
              <!--                    :key="item.value"-->
              <!--                    :label="item.label"-->
              <!--                    :value="item.value"-->
              <!--                  ></el-option>-->
              <!--                </el-select>-->
              <!--              </el-form-item>-->
              <!--              <el-form-item-->
              <!--                label="专题字段"-->
              <!--                prop="specialWord"-->
              <!--                v-if="-->
              <!--                  serveInfoForm.serviceType !== '27' &&-->
              <!--                  (serveForm.specialType === 1 ||-->
              <!--                    serveForm.specialType === 2)-->
              <!--                "-->
              <!--              >-->
              <!--                <el-select-->
              <!--                  v-model="serveForm.specialWord"-->
              <!--                  style="width: 100%"-->
              <!--                  @visible-change="-->
              <!--                    (val) => {-->
              <!--                      if (val) return getSpecialFields()-->
              <!--                    }-->
              <!--                  "-->
              <!--                  clearable-->
              <!--                >-->
              <!--                  <el-option-->
              <!--                    v-for="item in specialWordOption"-->
              <!--                    :key="item.field"-->
              <!--                    :label="item.caption"-->
              <!--                    :value="item.field"-->
              <!--                  />-->
              <!--                </el-select>-->
              <!--              </el-form-item>-->
              <el-form-item
                label="BIM类型"
                prop="bimType"
                v-if="serveInfoForm.serviceType === '27'"
              >
                <el-select
                  placeholder="请选择"
                  v-model="serveForm.bimType"
                  style="width: 100%"
                >
                  <el-option
                    v-for="item in bimTypeList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
              <!-- <el-form-item
                label="数据地址"
                prop="dataUrl"
                v-if="serveInfoForm.serviceType === '27'"
              >
                <el-input
                  v-model="serveForm.dataUrl"
                  @change="onDateServiceUrlChange(1)"
                />
              </el-form-item> -->
              <!-- @blur="getBimDataFields" -->
            </div>
          </div>

          <div style="flex: 1; margin-left: 100px">
            <div class="type-title">
              <!-- <div class="type-title-pre"></div> -->
              <span>数据服务信息</span>

              <div class="add">
                <span
                  class="el-icon-plus"
                  @click="addServiceList"
                ></span>
                <!--              <span class="add-text" @click="addServiceList"-->
                <!--                >添加</span-->
                <!--              >-->
              </div>
            </div>
            <div
              class="dialog-line"
              v-if="serveInfoForm.serviceType !== '27'"
            ></div>
            <!-- <span
            v-if="
              serveInfoForm.serviceType &&
              serveInfoForm.serviceType !== '27'
            "
            >数据服务</span
          > -->
            <!-- <el-form-item
              label="数据名称"
              v-if="
                serveInfoForm.serviceType &&
                serveInfoForm.serviceType !== '27' &&
                dataServiceList.length
              "
            >
              <el-input
                v-model="dataServiceList[tabActive].name"
                clearable
              />
            </el-form-item>
            <el-form-item
              label="数据地址"
              v-if="
                serveInfoForm.serviceType &&
                serveInfoForm.serviceType !== '27' &&
                dataServiceList.length
              "
            >
              <el-input
                v-model="dataServiceList[tabActive].url"
                clearable
              />
            </el-form-item>
            <el-form-item
              label="默认统计服务"
              v-if="
                serveInfoForm.serviceType &&
                serveInfoForm.serviceType !== '27' &&
                dataServiceList.length
              "
            >
              <el-switch
                v-model="
                  dataServiceList[tabActive].isDefault
                "
                @change="multipleDataServiceDefaultChange"
              />
            </el-form-item> -->
            <div>
              <el-table
                :header-cell-style="{
                  background: '#F2F6FB ',
                  color: ' #6B767D'
                }"
                :data="dataServiceInfoList"
                max-height="300"
                style="margin-top: 10px; width: 100%"
              >
                <el-table-column
                  label="序号"
                  width="100"
                  align="center"
                >
                  <template slot-scope="scope">
                    {{ scope.$index + 1 }}
                  </template>
                </el-table-column>
                <el-table-column
                  label="数据服务名称"
                  width="180"
                >
                  <template slot-scope="scope">
                    <el-input
                      placeholder="请输入"
                      style="margin: 5px 10px"
                      v-model="scope.row.name"
                    />
                  </template>
                </el-table-column>
                <el-table-column
                  label="数据服务地址"
                  width="300"
                >
                  <template slot-scope="scope">
                    <el-input
                      placeholder="请输入"
                      style="margin: 5px 10px"
                      v-model="scope.row.url"
                    />
                  </template>
                </el-table-column>
                <el-table-column
                  label="默认统计服务"
                  align="center"
                  width="180"
                >
                  <template slot-scope="scope">
                    <el-switch
                      v-model="scope.row.isDefault"
                      @change="
                        changeSwitch(
                          scope.$index,
                          scope.row
                        )
                      "
                    >
                    </el-switch>
                  </template>
                </el-table-column>
                <el-table-column
                  label="操作"
                  align="center"
                  width="180"
                >
                  <template slot-scope="scope">
                    <div
                      class="delete-btn"
                      @click="
                        handleDelete(
                          scope.$index,
                          scope.row
                        )
                      "
                    >
                      删除
                    </div>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
        </div>
        <!-- </div> -->
        <!-- <div v-show="activeTool === 'chart'"> -->

        <!-- </div> -->
      </el-form>
      <div class="submit">
        <div class="line"></div>
        <div
          class="submit-btn"
          @click="onSubmitServe('ruleFormServe')"
        >
          {{ addServe === true ? '提交' : '保存' }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  serviceQuery,
  serveAdd,
  serveEdit,
  statisticsAdd,
  statisticsQuery,
  checkMapServiceDelete,
  checkDataServiceDelete
} from '@/api/tree'
import {
  deleteDataService,
  deleteNewDataService,
  modifyDataService
} from '@/api/multiple-dataservice'
import Icon from '@/components/icon'
import axios from 'axios'
import { cloneDeep } from 'lodash'

const initServeForm = {
  catalogId: '',
  catalogName: '',
  sourceName: '',
  serviceType: '',
  serviceUrl: '',
  signService: '',
  // dataService: '',
  showChart: 0,
  aggFields: '',
  groupFields: '',
  types: '',
  specialType: '',
  specialWord: '',
  range: [],
  bimType: '',
  serviceName: '',
  codeField: '',
  dataUrl: '',
  layerUrl: ''
}

export default {
  name: 'serveMount',
  components: {
    Icon
  },
  data() {
    return {
      secondTitle: '',
      serveInfoForm: {
        pkid: '',
        catalogId: '',
        catalogName: '',
        sourceName: '',
        serviceType: '',
        showChart: 0,
        aggFields: [],
        groupFields: [],
        range: [],
        types: []
      },
      serveInfoRules: {
        sourceName: [
          {
            required: true,
            message: '请输入服务名称',
            trigger: 'blur'
          }
        ],
        serviceType: [
          {
            required: true,
            message: '请选择服务类型',
            trigger: 'change'
          }
        ],
        showChart: [
          {
            required: true,
            message: '请选择统计图表',
            trigger: 'radio'
          }
        ],
        aggFields: [
          {
            required: true,
            message: '请选择统计指标',
            trigger: 'change'
          }
        ],
        groupFields: [
          {
            required: true,
            message: '请选择分类字段',
            trigger: 'change'
          }
        ],
        types: [
          {
            required: true,
            message: '请选择统计方式',
            trigger: 'change'
          }
        ]
      },
      serveForm: {
        catalogId: '',
        catalogName: '',
        sourceName: '',
        serviceType: '',
        serviceUrl: '',
        signService: '',
        // dataService: '',
        showChart: '',
        aggFields: '',
        groupFields: '',
        types: '',
        specialType: '',
        specialWord: '',
        range: [],
        bimType: '',
        serviceName: '',
        codeField: '',
        dataUrl: '',
        layerUrl: ''
      },
      serveRules: {
        sourceName: [
          {
            required: true,
            message: '请输入服务名称',
            trigger: 'blur'
          }
        ],
        serviceType: [
          {
            required: true,
            message: '请选择服务类型',
            trigger: 'change'
          }
        ],
        serviceUrl: [
          {
            required: true,
            message: '请输入服务地址',
            trigger: 'blur'
          }
        ],
        // signService: [
        //   {
        //     required: true,
        //     message: '请输入图例服务地址',
        //     trigger: 'blur'
        //   }
        // ],
        // specialType: [
        //   {
        //     required: true,
        //     message: '请选择',
        //     trigger: 'change'
        //   }
        // ],
        // dataService: [
        //   {
        //     required: false,
        //     message: '请输入数据服务地址',
        //     trigger: 'blur'
        //   }
        // ],
        // specialWord: [
        //   {
        //     required: false,
        //     message: '请选择专题字段',
        //     trigger: 'change'
        //   }
        // ],
        showChart: [
          {
            required: true,
            message: '请选择统计图表是否显示',
            trigger: 'change'
          }
        ],
        aggFields: [
          {
            required: false,
            message: '请选择统计指标',
            trigger: 'change'
          }
        ],
        groupFields: [
          {
            required: false,
            message: '请选择分类字段',
            trigger: 'change'
          }
        ],
        types: [
          {
            required: false,
            message: '请选择统计方式',
            trigger: 'change'
          }
        ],
        range: [
          {
            required: false,
            message: '请选择统计范围',
            trigger: 'change'
          }
        ],
        bimType: [
          {
            required: false,
            message: '请选择BIM类型',
            trigger: 'blur'
          }
        ]
      },
      dataServiceList: [
        {
          attributeWord: '',
          isDefault: true,
          name: '',
          pkid: '',
          serviceId: '',
          status: null,
          url: ''
        }
      ],
      optionAll: {
        fields: [],
        fieldsList: [],
        four: [
          {
            label: '平均值',
            value: 0
          },
          {
            label: '计数',
            value: 1
          },
          {
            label: '求和',
            value: 2
          }
        ]
      },
      serveTypeList: [
        // { key: '21', value: 'WMTS' },
        // { key: '22', value: 'XYZ Tiles' },
        { key: '23', value: '矢量切片服务' },
        // { key: '24', value: 'WMS' },
        // { key: '25', value: 'ArcGIS Server' },
        { key: '26', value: 'SuperMap REST' },
        { key: '27', value: 'SuperMap RealSpace' }
      ],
      editableTabsValue: '1',
      editableTabs: [],
      tabIndex: 0,
      tabActive: -1,
      bimTypeList: [
        { value: 1, label: '楼栋' },
        { value: 2, label: '管廊' },
        { value: 3, label: '其他' }
      ],
      specialTypeList: [
        { value: 1, label: '噪音监测' },
        { value: 2, label: '视频监控' },
        { value: 3, label: '无' }
      ],
      addServe: true,
      originDataServiceList: [],
      bimServeTabName: 'bim0',
      specialWordOption: [],
      // dataServiceInfoList: [
      //   {
      //     name: '',
      //     url: '',
      //     isDefault: false,
      //     attributeWord: ''
      //   }
      // ],
      dataServiceInfoList: [],
      serviceFormArr: [
        {
          serveForm: '',
          dataServiceInfoList: []
        }
      ],
      getDataServiceList: [],
      sourceName: '',
      serviceType: '',
      isDataServiceComplete: true
    }
  },
  mounted() {
    this.initDataList()
  },
  methods: {
    initDataList() {
      const route = this.$route.query
      this.serveInfoForm.catalogId = route.catalogId
      this.serveInfoForm.catalogName = route.catalogName
      this.addServe = Number(route.addServe) === 1
      this.serveForm.codeField = route.catalogName
      this.secondTitle = route.title

      if (this.dataServiceList.length) {
        for (
          let i = 0;
          i < this.dataServiceList.length;
          i++
        ) {
          this.editableTabs.push({
            title: `服务${i + 1}`,
            name: `${i + 1}`
          })
        }
        this.tabIndex = 1
        this.tabActive = 0
      }

      this.serviceFormArr[0].serveForm = this.serveForm
      this.serviceFormArr[0].dataServiceInfoList =
        this.dataServiceInfoList
      if (!this.addServe) {
        this.originDataServiceList =
          route.originDataServiceList
        this.tabIndex = route.tabIndex
        this.tabActive = route.tabActive
        this.getDataServiceList = JSON.parse(
          route.getDataServiceList
        )
        this.editableTabs = []
        if (this.getDataServiceList.length) {
          for (
            let i = 0;
            i < this.getDataServiceList.length;
            i++
          ) {
            this.editableTabs.push({
              title: `服务${i + 1}`,
              name: `${i + 1}`
            })
          }
          this.tabIndex = 1
          this.tabActive = 0
        }
        if (JSON.parse(route.serviceFormArr).length) {
          this.serviceFormArr = JSON.parse(
            route.serviceFormArr
          ) //
          this.serveForm = this.serviceFormArr[0].serveForm //
        }
        this.dataServiceInfoList =
          this.serviceFormArr[0].dataServiceInfoList //
        this.serveInfoForm.pkid = route.pkid //
        this.serveInfoForm.sourceName = route.sourceName //
        this.serveInfoForm.serviceType = route.serviceType //
        this.serveInfoForm.range = JSON.parse(route.range) //
        this.serveInfoForm.showChart = Number(
          route.showChart
        ) //
        if (this.serveForm.showChart === 1) {
          // this.serveRules.dataService[0].required = true
          this.serveInfoRules.aggFields[0].required = true
          this.serveInfoRules.groupFields[0].required = true
          this.serveInfoRules.types[0].required = true

          statisticsQuery({
            serviceId: this.serveInfoForm.pkid
          }).then((res) => {
            if (res.success) {
              this.serveInfoForm.aggFields =
                res.data.aggFields
              this.serveInfoForm.groupFields =
                res.data.groupFields
              this.serveInfoForm.types = res.data.types

              if (this.serveInfoForm.dataService) {
                this.getFields(true)
              }
            } else {
              this.$message.error(res.message)
            }
          })
        }
      }
    },
    goBackCalalogue() {
      // this.$router.back()
      this.$router.push({
        path: '/mochaITOM/catalogueManagement',
        query: {
          treeActiveId: this.serveInfoForm.catalogId,
          treeActiveName: this.serveInfoForm.catalogName
        }
      })
    },
    onServiceUrlChange(index) {
      switch (index) {
        case 0:
          this.$refs.ruleFormServe.clearValidate()
          break
        case 1:
          this.$refs.ruleFormServe.clearValidate()
          break
        case 2:
          this.$refs.ruleFormServe.clearValidate()
          break
        case 3:
          this.$refs.ruleFormServe.clearValidate()
          break
        default:
          break
      }
    },
    onDateServiceUrlChange(index) {
      switch (index) {
        case 0:
          this.serveInfoRules.bim0.serviceUrl[0].required =
            !!this.serveInfoForm.bim0.dataService
          this.$refs.ruleFormServe.clearValidate()
          break
        case 1:
          this.serveInfoRules.bim1.serviceUrl[0].required =
            !!this.serveInfoForm.bim1.dataService
          this.$refs.ruleFormServe.clearValidate()
          break
        case 2:
          this.serveInfoRules.bim2.serviceUrl[0].required =
            !!this.serveInfoForm.bim2.dataService
          this.$refs.ruleFormServe.clearValidate()
          break
        case 3:
          this.serveInfoRules.bim3.serviceUrl[0].required =
            !!this.serveInfoForm.bim3.dataService
          this.$refs.ruleFormServe.clearValidate()
          break
        default:
          break
      }
    },
    showChartChange(e) {
      // 显示统计图表时下列项改为必填
      // this.serveRules.dataService[0].required = e === 1
      this.serveInfoRules.aggFields[0].required = e === 1
      this.serveInfoRules.groupFields[0].required = e === 1
      this.serveInfoRules.types[0].required = e === 1

      if (this.addServe) {
        this.serveInfoForm.aggFields = ''
        this.serveInfoForm.groupFields = ''
        this.serveInfoForm.types = ''
        this.optionAll.fields = []
        this.optionAll.fieldsList = []
        if (e) {
          this.getFields()
        }
      } else {
        if (e) {
          this.getFields()
          statisticsQuery({
            serviceId: this.serveInfoForm.pkid
          }).then((res) => {
            if (res.success) {
              this.serveInfoForm.aggFields =
                res.data.aggFields
              this.serveInfoForm.groupFields =
                res.data.groupFields
              this.serveInfoForm.types = res.data.types
            } else {
              this.$message.error(res.message)
            }
          })
        } else {
          this.serveInfoForm.aggFields = ''
          this.serveInfoForm.groupFields = ''
          this.serveInfoForm.types = ''
        }
      }
    },
    getBimDataFields() {
      if (
        !this.serveInfoForm[this.bimServeTabName]
          .dataService
      ) {
        this.$message.error(
          '请输入数据服务地址获取统计字段与分类字段'
        )
        return
      }
      axios
        .get(
          this.serveInfoForm[this.bimServeTabName]
            .dataService + '/fields.json',
          {}
        )
        .then((res) => {
          const fieldList = res.data.fieldNames.map(
            (item, index) => {
              return {
                field: item,
                url: res.data.childUriList[index],
                caption: item
              }
            }
          )
          fieldList.forEach((item) => {
            axios
              .get(item.url + '.json')
              .then((jsonResult) => {
                item.caption =
                  jsonResult.data.fieldInfo.caption
              })
          })
          this.serveInfoForm[
            this.bimServeTabName
          ].bimDataFields = fieldList
          this.$forceUpdate()
        })
      // if(this.bimServeTabName==bim0){

      // }
    },
    getFields(isUpdateService) {
      const defaultIndex =
        this.dataServiceInfoList.findIndex(
          (item) => item.isDefault
        )
      if (
        this.serveInfoForm.showChart &&
        (defaultIndex === -1 ||
          !this.dataServiceInfoList[defaultIndex].url)
      ) {
        this.$message.error(
          '请配置数据服务地址并勾选默认统计服务'
        )
        return
      } else if (!this.serveInfoForm.showChart) {
        return
      }
      axios
        .get(
          this.dataServiceInfoList[defaultIndex].url +
            '/fields.json'
        )
        .then((res) => {
          const fieldList = res.data.fieldNames.map(
            (item, index) => {
              return {
                field: item,
                url: res.data.childUriList[index],
                caption: item
              }
            }
          )
          fieldList.forEach((item) => {
            axios
              .get(item.url + '.json')
              .then((jsonResult) => {
                item.caption =
                  jsonResult.data.fieldInfo.caption
              })
          })
          this.optionAll.fields = fieldList
          this.optionAll.fieldsList = fieldList
          if (isUpdateService) {
            this.serveInfoForm.aggFields =
              this.serveForm.aggFields.map((agg) => {
                const find = fieldList.find(
                  (field) => field.field === agg
                )
                if (find) {
                  if (find.caption) {
                    return find.caption
                  } else {
                    return find.field
                  }
                }
              })
            this.serveInfoForm.groupFields =
              this.serveInfoForm.groupFields.map(
                (group) => {
                  return fieldList.find(
                    (field) => field.field === group
                  ).caption
                }
              )
          }
        })
        .catch(() => {
          // 请求失败的回调;
          this.$message.error('获取统计字段与分组字段失败')
        })
    },
    handleTabsEdit(targetName, action) {
      if (action === 'add') {
        // this.tabActive = this.tabIndex
        // console.log(this.tabActive)
        this.dataServiceList.push({
          name: '',
          url: '',
          isDefault: false,
          attributeWord: ''
        })
        // const newTabName = ++this.tabIndex + ''
        this.tabIndex = this.tabIndex + 1
        const newTabName = this.editableTabs.length + 1 + ''
        this.editableTabs.push({
          title: '服务' + newTabName,
          name: newTabName
        })
        this.tabActive = this.editableTabs.length - 1
        this.editableTabsValue = newTabName
      }
      if (action === 'remove') {
        // 可以不设置数据服务地址，取消最少一条的限制
        // if (this.editableTabs.length === 1) {
        //   this.$message.error('必须保留一条数据！')
        //   this.tabIndex = 1
        //   return
        // }
        const removeIndex = Number.parseInt(targetName) - 1
        // console.log('removeIndex', removeIndex);
        if (
          this.addServe ||
          !this.serviceFormArr[removeIndex].serveForm.pkid
        ) {
          const tabs = this.editableTabs
          this.serviceFormArr.splice(targetName - 1, 1)
          let activeName = this.editableTabsValue
          if (activeName === targetName) {
            tabs.forEach((tab, index) => {
              if (tab.name === targetName) {
                const nextTab =
                  tabs[index + 1] || tabs[index - 1]
                if (nextTab) {
                  activeName = nextTab.name
                }
              }
            })
          }
          this.editableTabs = tabs.filter(
            (tab) => tab.name !== targetName
          )
          this.editableTabs = this.editableTabs.map(
            (item, index) => {
              // console.log(index + 1)
              item.title = '服务' + (index + 1)
              item.name = (index + 1).toString()
              return item
            }
          )
          this.dataServiceList.splice(removeIndex, 1)
          this.tabIndex = this.editableTabs.length
          this.tabActive = this.tabIndex - 1
          this.editableTabsValue = this.tabIndex.toString()
          this.serveForm =
            this.serviceFormArr[
              this.serviceFormArr.length - 1
            ].serveForm
        } else {
          console.log(
            this.serviceFormArr[removeIndex].serveForm.pkid
          )
          checkMapServiceDelete(
            this.serviceFormArr[removeIndex].serveForm.pkid
          ).then((res) => {
            if (res.success && res.data) {
              this.$confirm(
                '此服务下有挂载的附件，是否删除?',
                '提示',
                {
                  confirmButtonText: '确定',
                  cancelButtonText: '取消',
                  type: 'warning'
                }
              ).then(() => {
                this.doMapServiceDelete(
                  removeIndex,
                  targetName
                )
              })
            } else {
              this.doMapServiceDelete(
                removeIndex,
                targetName
              )
            }
          })
        }
      }
    },
    doMapServiceDelete(removeIndex, targetName) {
      this.$confirm(
        '此操作将永久删除该数据服务，是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).then(() => {
        deleteNewDataService([
          this.serviceFormArr[removeIndex].serveForm.pkid
        ])
          .then((res) => {
            // console.log(res)
            if (res.success) {
              this.$message.success('删除成功')
              this.serviceFormArr.splice(targetName - 1, 1)
              const tabs = this.editableTabs
              let activeName = this.editableTabsValue
              if (activeName === targetName) {
                tabs.forEach((tab, index) => {
                  if (tab.name === targetName) {
                    const nextTab =
                      tabs[index + 1] || tabs[index - 1]
                    if (nextTab) {
                      activeName = nextTab.name
                    }
                  }
                })
              }
              this.editableTabs = tabs.filter(
                (tab) => tab.name !== targetName
              )
              this.editableTabs = this.editableTabs.map(
                (item, index) => {
                  item.title = '服务' + (index + 1)
                  item.name = (index + 1).toString()
                  return item
                }
              )
              this.dataServiceList.splice(removeIndex, 1)
              this.originDataServiceList.splice(
                removeIndex,
                1
              )
              this.tabIndex = this.editableTabs.length
              this.tabActive = this.tabIndex - 1
              this.editableTabsValue =
                this.tabIndex.toString()

              this.serviceFormArr.map((item, index) => {
                if (index + 1 === Number(targetName)) {
                  this.serveForm = item.serveForm
                  this.dataServiceInfoList =
                    item.dataServiceInfoList
                }
              })
            } else {
              this.$message.warning(
                res.message || '删除失败'
              )
            }
          })
          .catch((err) => {
            this.$message.error(err)
          })
      })
    },
    handleTabClick(tab) {
      this.tabActive = Number.parseInt(tab.index)
    },
    onServiceTypeChange(e) {
      if (e) {
        this.serveRules.bimType[0].required = e === '27'
      }
    },
    specialTypeChange(val) {
      // this.serveRules.specialWord[0].required = val !== 3
    },
    multipleDataServiceDefaultChange(checked) {
      if (checked) {
        this.dataServiceList.forEach((item, index) => {
          item.isDefault = index === this.tabActive
        })
        this.getFields()
      } else {
        this.dataServiceList[
          this.tabActive
        ].isDefault = false
        this.optionAll.fields = []
        this.optionAll.fieldsList = []
      }
    },
    // 组织请求服务id数据
    setGetServiceIdData() {
      return {
        sourceName: this.serveInfoForm.sourceName,
        serviceType: this.serveInfoForm.serviceType,
        catalogId: this.serveInfoForm.catalogId
      }
    },
    // 组织添加图表数据
    setStatisticsData(serviceId) {
      return {
        serviceId: serviceId,
        aggFields: this.serveInfoForm.aggFields,
        groupFields: this.serveInfoForm.groupFields,
        types: this.serveInfoForm.types
      }
    },
    // 组织修改挂载服务数据
    setServeEditData() {
      return {
        catalogId: this.serveInfoForm.catalogId,
        sourceName: this.serveInfoForm.sourceName,
        serviceType: this.serveInfoForm.serviceType,
        // serviceUrl: JSON.stringify({
        //   layerUrl: item.serveForm.layerUrl,
        //   dataUrl: item.serveForm.dataUrl
        // }),
        signService: this.serveForm.signService,
        showChart: this.serveInfoForm.showChart,
        specialType: this.serveForm.specialType,
        specialWord: this.serveForm.specialWord,
        areaAgg:
          this.serveInfoForm.range.indexOf('区域') !== -1
            ? 1
            : 0,
        customAgg:
          this.serveInfoForm.range.indexOf('自定义') !== -1
            ? 1
            : 0
      }
    },
    // 组织添加服务表单数据
    setAddFormData(serviceId, arr) {
      return [
        ...arr.map((item) => {
          return {
            catalogId: this.serveInfoForm.catalogId,
            sourceName: this.serveInfoForm.sourceName,
            serviceType: this.serveInfoForm.serviceType,
            catalogName: this.serveInfoForm.catalogName,
            serviceUrl: item.serveForm.serviceUrl,
            signService: item.serveForm.signService,
            showChart: this.serveInfoForm.showChart,
            serviceName: item.serveForm.serviceName,
            bimCode: item.serveForm.codeField,
            specialType: item.serveForm.specialType,
            specialWord: item.serveForm.specialWord,
            bimType: item.serveForm.bimType,
            resourceServiceDataInfoList: [
              ...item.dataServiceInfoList.map((item1) => {
                return {
                  name: item1.name,
                  serviceDataUrl: item1.url,
                  isDefault: item1.isDefault ? 1 : 0,
                  serviceId: serviceId,
                  attributeWord: ''
                }
              })
            ],
            serviceInfoId: serviceId,
            areaAgg:
              this.serveInfoForm.range.indexOf('区域') !==
              -1
                ? 1
                : 0,
            customAgg:
              this.serveInfoForm.range.indexOf('自定义') !==
              -1
                ? 1
                : 0
          }
        })
      ]
    },
    // 组织修改服务表单数据
    setUpdateFormData(arr) {
      return [
        ...arr.map((item) => {
          return {
            pkid: item.serveForm.pkid,
            catalogId: this.serveInfoForm.catalogId,
            sourceName: this.serveInfoForm.sourceName,
            serviceType: this.serveInfoForm.serviceType,
            catalogName: this.serveInfoForm.catalogName,
            serviceUrl: item.serveForm.serviceUrl,
            signService: item.serveForm.signService,
            showChart: this.serveInfoForm.showChart,
            serviceName: item.serveForm.serviceName,
            bimCode: item.serveForm.codeField,
            specialType: item.serveForm.specialType,
            specialWord: item.serveForm.specialWord,
            bimType: item.serveForm.bimType,
            resourceServiceDataInfoList: [
              ...item.dataServiceInfoList.map((item1) => {
                if (item1.pkid) {
                  return {
                    name: item1.name,
                    serviceDataUrl: item1.url,
                    isDefault: item1.isDefault ? 1 : 0,
                    serviceId: item.serveForm.pkid
                      ? item.serveForm.pkid
                      : this.serveInfoForm.pkid,
                    pkid: item1.pkid,
                    attributeWord: item1.attributeWord
                  }
                } else {
                  return {
                    name: item1.name,
                    serviceDataUrl: item1.url,
                    isDefault: item1.isDefault ? 1 : 0,
                    serviceId: item.serveForm.pkid
                      ? item.serveForm.pkid
                      : this.serveInfoForm.pkid,
                    attributeWord: ''
                  }
                }
              })
            ],
            serviceInfoId: this.serveInfoForm.pkid,
            areaAgg:
              this.serveInfoForm.range.indexOf('区域') !==
              -1
                ? 1
                : 0,
            customAgg:
              this.serveInfoForm.range.indexOf('自定义') !==
              -1
                ? 1
                : 0
          }
        })
      ]
    },
    onSubmitServe(ruleForm) {
      this.$refs[ruleForm].validate((vaild) => {
        if (vaild) {
          // 手动校验多数据服务配置有效性
          // if (
          //   this.serveInfoForm.serviceType !== '27' &&
          //   this.dataServiceInfoList.some(
          //     (item) => !item.name || !item.url
          //   )
          // ) {
          //   this.$message.error(
          //     '数据服务名称和地址不能为空'
          //   )
          //   return
          // }
          if (
            !this.serveInfoForm.sourceName ||
            !this.serveInfoForm.serviceType
          ) {
            this.$message.error(
              '数据名称和服务类型不能为空'
            )
          } else {
            // 判断数据服务信息是否填写完整
            const result = this.serviceFormArr.map(
              (item) => {
                return item.dataServiceInfoList.every(
                  (item1) => item1.url && item1.name
                )
              }
            )
            this.isDataServiceComplete = result.every(
              (item) => item
            )
            if (this.isDataServiceComplete) {
              if (this.addServe) {
                this.addServeData(this.serviceFormArr)
              } else {
                const updateArr =
                  this.serviceFormArr.filter(
                    (item) => item.serveForm.pkid
                  )
                const addArr = this.serviceFormArr.filter(
                  (item) => !item.serveForm.pkid
                )
                this.updateServeData(updateArr, addArr)
              }
            } else {
              this.$message.warning(
                '请将数据服务信息填写完整'
              )
            }
          }
        }
      })
    },
    // 新增服务挂载
    addServeData(arr) {
      const ServiceIdData = this.setGetServiceIdData()
      serveAdd(ServiceIdData).then((res) => {
        if (res.success) {
          if (res.data) {
            this.$message.success('新增目录成功')
          }
          const serviceId = res.data
          const statisticsData =
            this.setStatisticsData(serviceId)
          // 判断是否显示图表
          if (this.serveInfoForm.showChart) {
            statisticsAdd(statisticsData).then((res) => {
              if (res.success) {
                const formData = this.setAddFormData(
                  serviceId,
                  arr
                )
                modifyDataService(formData)
                  .then((res) => {
                    this.goBack()
                    if (!res.success) {
                      this.$message.error(res.message)
                    }
                  })
                  .catch((err) => {
                    this.$message.error(err)
                  })
              } else {
                this.$message.error(res.message)
              }
            })
          } else {
            const formData = this.setAddFormData(
              serviceId,
              arr
            )
            modifyDataService(formData)
              .then((res) => {
                this.goBack()
                if (!res.success) {
                  this.$message.error(res.message)
                }
              })
              .catch((err) => {
                this.$message.error(err)
              })
          }
        } else {
          this.$message.error(res.message)
        }
      })
    },
    // 更新挂载服务数据
    updateServeData(updateArr, addArr) {
      const serveEditData = this.setServeEditData()
      let updateFormData = []
      let addFormData = []
      let formData = []

      serveEdit(
        serveEditData,
        this.serveInfoForm.pkid
      ).then(async (res) => {
        if (res.success) {
          this.$message.success(res.data)
          // 判断是否显示图表
          if (updateArr.length) {
            updateFormData =
              this.setUpdateFormData(updateArr)
          }
          if (addArr.length) {
            addFormData = this.setUpdateFormData(addArr)
            addFormData.map((item) => {
              delete item.pkid
              return item
            })
          }
          formData = updateFormData.concat(addFormData)
          if (this.serveInfoForm.showChart) {
            const statisticsData = this.setStatisticsData(
              this.serveInfoForm.pkid
            )
            statisticsAdd(statisticsData).then(
              async (res) => {
                if (res.success) {
                  if (formData.length) {
                    modifyDataService(formData)
                      .then((res) => {
                        this.goBack()
                        if (!res.success) {
                          this.$message.error(res.message)
                        }
                      })
                      .catch((err) => {
                        this.$message.error(err)
                      })
                  }
                  // if (addArr.length) {
                  //   const addFormData =
                  //     this.setUpdateFormData(addArr)
                  //   addFormData.map((item) => {
                  //     addDataService()
                  //       .then((res) => {})
                  //       .catch((err) => {
                  //         this.$message.error(err)
                  //       })
                  //   })
                  //   //新增服务数据没有pkid
                  //   addFormData.map((item) => {
                  //     delete item.pkid
                  //     return item
                  //   })
                  //   mountDataService(addFormData)
                  //     .then((res) => {
                  //       this.goBack()
                  //       if (!res.success) {
                  //         this.$message.error(res.message)
                  //       }
                  //     })
                  //     .catch((err) => {
                  //       this.$message.error(err)
                  //     })
                  // }
                } else {
                  this.$message.error(res.message)
                }
              }
            )
          } else {
            if (formData.length) {
              modifyDataService(formData)
                .then((res) => {
                  this.goBack()
                  if (!res.success) {
                    this.$message.error(res.message)
                  }
                })
                .catch((err) => {
                  this.$message.error(err)
                })
            }
            // if (addArr.length) {
            //   const addFormData =
            //     this.setUpdateFormData(addArr)
            //   // 新增服务数据没有pkid
            //   addFormData.map((item) => {
            //     delete item.pkid
            //     return item
            //   })
            //   console.log('addFormData', addFormData)
            //   mountDataService(addFormData)
            //     .then((res) => {
            //       this.goBack()
            //       if (!res.success) {
            //         this.$message.error(res.message)
            //       }
            //     })
            //     .catch((err) => {
            //       this.$message.error(err)
            //     })
            // }
          }
        } else {
          this.$message.error(res.message)
        }
      })
    },
    goBack() {
      // const catalogNode = {
      //   treeActiveId: this.serveInfoForm.catalogId,
      //   treeActiveName: this.serveInfoForm.catalogName
      // }
      // this.$bus.$emit('currentCatalogNode', catalogNode);
      // this.$router.back();
      this.$router.push({
        path: '/mochaITOM/catalogueManagement',
        query: {
          treeActiveId: this.serveInfoForm.catalogId,
          treeActiveName: this.serveInfoForm.catalogName
        }
      })
    },
    addServiceList() {
      this.dataServiceInfoList.push({
        name: '',
        url: '',
        isDefault: false,
        attributeWord: ''
      })
    },
    handleDelete(index, row) {
      checkDataServiceDelete(row.pkid).then((res) => {
        if (res.success && res.data) {
          this.$confirm(
            '此服务下有挂载的附件，是否删除?',
            '提示',
            {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }
          ).then(() => {
            this.doDataServiceDelete(row)
          })
        } else {
          this.doDataServiceDelete(row, index)
        }
      })
    },
    doDataServiceDelete(row, index) {
      if (row.pkid) {
        this.$confirm(
          '此操作将永久删除该条数据服务信息，是否继续?',
          '提示',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }
        ).then(() => {
          deleteDataService([row.pkid])
            .then((res) => {
              if (res.success) {
                this.$message.success('删除成功')
                this.dataServiceInfoList.splice(index, 1)
              }
            })
            .catch((err) => {
              this.$message.error(err)
            })
        })
      } else {
        this.dataServiceInfoList.splice(index, 1)
      }
    },
    getPreTab(next, pre) {
      // this.serviceFormArr.forEach((item, index) => {
      //   if (item.id === pre) {
      //     item.data = JSON.parse(
      //       JSON.stringify(this.serveForm)
      //     )
      //     return item
      //   }
      // })
      // console.log('next', next)
      // console.log('pre', pre)
      initServeForm.codeField =
        this.serveInfoForm.catalogName
      this.serviceFormArr.map((item, index) => {
        if (index + 1 === Number(pre)) {
          item.serveForm = cloneDeep(this.serveForm)
          item.serveForm.sourceName = cloneDeep(
            this.serveInfoForm.sourceName
          )
          item.serveForm.serviceType = cloneDeep(
            this.serveInfoForm.serviceType
          )
          item.dataServiceInfoList = cloneDeep(
            this.dataServiceInfoList
          )
          return item
        }
      })
      const result = this.serviceFormArr.some(
        (item, index) => index + 1 === Number(next)
      )
      if (!result) {
        this.serveForm = initServeForm
        this.serveForm.serviceName = ''
        this.serveForm.serviceUrl = ''
        this.serveForm.signService = ''
        this.serveForm.specialType = ''
        this.serveForm.bimType = ''
        this.serveForm.layerUrl = ''
        this.serveForm.dataUrl = ''
        // 初始化表格数据
        // const initListArr = [
        //   {
        //     name: '',
        //     url: '',
        //     isDefault: false,
        //     attributeWord: ''
        //   }
        // ]
        this.dataServiceInfoList = []
        this.serviceFormArr.push({
          serveForm: initServeForm,
          dataServiceInfoList: []
        })
      }

      this.serviceFormArr.map((item, index) => {
        if (index + 1 === Number(next)) {
          this.serveForm = item.serveForm
          this.dataServiceInfoList =
            item.dataServiceInfoList
        }
      })
    },
    getSpecialFields(val) {
      if (val) {
        const defaultIndex =
          this.dataServiceInfoList.findIndex(
            (item) => item.isDefault
          )
        this.specialWordOption = []
        if (
          defaultIndex === -1 ||
          !this.dataServiceInfoList[defaultIndex].url
        ) {
          this.$message.error(
            '请配置数据服务地址并勾选默认统计服务'
          )
          return
        }

        axios
          .get(
            this.dataServiceInfoList[defaultIndex].url +
              '/fields.json'
          )
          .then((res) => {
            const fieldList = res.data.fieldNames.map(
              (item, index) => {
                return {
                  field: item,
                  url: res.data.childUriList[index],
                  caption: item
                }
              }
            )
            fieldList.forEach((item) => {
              axios
                .get(item.url + '.json')
                .then((jsonResult) => {
                  item.caption =
                    jsonResult.data.fieldInfo.caption
                })
            })
            this.specialWordOption = fieldList
          })
          .catch(() => {
            // 请求失败的回调;
            this.$message.error(
              '获取统计字段与分组字段失败'
            )
          })
      }
    },
    getServeList() {
      serviceQuery(this.parameter).then((res) => {
        if (res.success) {
          this.serveList = res.data.list
          this.total = res.data.count
        } else {
          this.$message.error(res.message)
        }
      })
    },
    changeSwitch(index, row) {
      if (row.isDefault === true) {
        this.dataServiceInfoList.map((item, i) => {
          if (i !== index) {
            return (item.isDefault = false)
          }
        })
        this.getFields()
      }

      const emptySelect = this.dataServiceInfoList.every(
        (item) => {
          return !item.isDefault
        }
      )
      if (emptySelect) {
        this.optionAll.fields = []
        this.optionAll.fieldsList = []
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.body {
  width: 100%;
  height: 100%;
  padding: 18px 15px 15px 16px;

  .buttons {
    float: right;

    div {
      display: inline-block;
      margin-left: 23px;
      color: #497fa3;
    }

    ::v-deep .el-button {
      background: #497fa3;
      border: 1px solid #497fa3;
      padding: 0;
      width: 80px;
      height: 34px;
      margin-left: 23px;
      color: white !important;
    }
  }

  &_left {
    width: 296px;
    height: 100%;
  }

  &_main {
    width: 100%;
    background: white;
    padding: 15px 30px;
    border-radius: 2px;
    overflow-y: scroll;

    .line {
      margin-top: 12px;
      width: 100%;
      height: 1px;
      background: #f1f1f1;
      //margin-bottom: 23px;
    }

    ::v-deep.light {
      background: #f9fcff;
      border: 1px solid #f2f6fb !important;
    }

    ::v-deep .el-table__row {
      .el-table__cell {
        padding: 0 !important;
        // color: #4c565c;
      }
    }

    ::v-deep {
      th {
        height: 42px;
        padding: 0;
      }

      //tr th:first-of-type label {
      //  display: none;
      //}

      .cell {
        padding: 0 !important;
      }

      .el-select {
        width: 100% !important;
      }

      td {
        padding: 0;
      }

      input {
        height: 41px;
        padding: 0;
        border: 0 !important;
      }
    }
  }
}

.type-title {
  display: flex;
  align-items: center;
  margin: 10px 0;

  .add {
    color: #d3dce6;
    border: 1px solid #d3dce6;
    height: 18px;
    width: 18px;
    margin-left: 10px;
    border-radius: 3px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;

    & > span {
      font-size: 12px;
    }

    &:hover {
      color: #409eff;
    }
  }

  &-pre {
    margin: 5px 10px 0 0;
    width: 4px;
    height: 14px;
    background: linear-gradient(180deg, #40ebff, #bcf8ff);
  }
}

::v-deep {
  .el-input {
    .el-input__inner {
      text-indent: 10px;
      // background: #f6f9fc !important;
      color: #333 !important;
      height: 34px !important;
      width: 320px !important;

      .el-input__icon {
        width: 16px !important;
        height: 16px !important;
        font-size: 16px !important;
      }
    }
  }

  .el-input.is-disabled {
    .el-input__inner {
      color: #a7adb5 !important;
    }
  }

  .el-input__suffix {
    top: 1px !important;
    right: 8px !important;
  }

  .el-select {
    width: 320px !important;
    .el-input__inner {
      width: 320px !important;
      // margin-left: 10px;
    }

    .el-input__suffix {
      top: 4px !important;
    }

    .is-focus {
      .el-input__suffix {
        top: -3px !important;
      }
    }
  }

  .el-cascader {
    top: -4px;

    .el-input__inner {
      width: 320px !important;
    }
  }

  .el-select .el-select__tags + .el-input .el-input__inner {
    height: auto !important;
    width: 320px !important;
    background-color: #f6f9fc !important;
  }

  .el-input__inner {
    height: 34px !important;
    background-color: #f6f9fc !important;
  }

  .el-input .el-input--suffix {
    width: 320px !important;
  }
  .el-tabs__nav-wrap::after {
    background-color: rgba(241, 241, 241, 0.5);
  }

  .el-icon-circle-plus-outline {
    margin: 3px 0 0 20px;
    color: #00baff;
    cursor: pointer;
  }
}

.serve-info {
  display: flex;
  margin-top: 10px;
}

.serve-center {
  display: flex;
  // justify-content: space-between;
}

.add-text {
  color: #00baff;
  cursor: pointer;
}
.submit {
  position: absolute;
  right: 50px;
  bottom: 30px;

  &-btn {
    width: 104px;
    height: 34px;
    background: #497fa3;
    border: 1px solid #497fa3;
    border-radius: 2px;
    color: white;
    text-align: center;
    line-height: 34px;
    cursor: pointer;
  }
}
.content-part {
  margin-left: 60px;
}

.config-part {
  flex: 1;
  margin-left: 100px;
}

.delete-btn {
  color: red;
  cursor: pointer;
}
</style>
